<template>
    <div class="register">
        <div class="left-side">
            <div class="register-content">
                <p class="left-side-tittle">注册</p>
                <ElForm
                    ref="formRef"
                    :model="numberValidateForm"
                    class="register-ruleForm"
                    label-position="top"
                    :rules="rules"
                    :inline="true"
                >
                    <ElFormItem label="真实姓名" prop="name">
                        <ElInput
                            v-model="numberValidateForm.name"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="电话" prop="phone">
                        <ElInput
                            v-model.number="numberValidateForm.phone"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>
                    <ElFormItem label="密码" prop="password">
                        <ElInput
                            v-model="numberValidateForm.password"
                            class="register-input"
                            type="password"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem label="再次输入密码" prop="passwordComfirm">
                        <ElInput
                            v-model="numberValidateForm.passwordComfirm"
                            class="register-input"
                            type="password"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>
                    <ElFormItem label="身份证号码" prop="identityCard">
                        <ElInput
                            v-model="numberValidateForm.identityCard"
                            class="register-input"
                            style="width: 590px"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>
                    <div class="upload">
                        <span>
                            上传本人身份证
                            <elTooltip v-model:visible="visible">
                                <template #content>
                                    <span>
                                        1.请上传清晰完整的身份证照片，保证内容清晰可识别；
                                        2.支持JPG、PNG格式文件，且大小不超过10M。
                                    </span>
                                </template>
                                <div
                                    class="remind-icion"
                                    @mouseenter="visible = true"
                                    @mouseleave="visible = false"
                                ></div>
                            </elTooltip>
                        </span>
                        <ElButton class="uploadBtn" style="margin: 0 30px">上传人面像</ElButton>
                        <ElButton class="uploadBtn">上传国徽面</ElButton>
                    </div>
                    <ElFormItem>
                        <ElButton
                            v-logAction="{
                                actionId: 'click',
                                actionPage: '/register',
                                item: '注册按钮',
                                paras: '用户点击注册提交按钮',
                            }"
                            type="primary"
                            class="registerBtn"
                            @click="submitForm(formRef)"
                        >
                            注册
                        </ElButton>
                        <p class="register-back">
                            已有帐号，
                            <ElButton type="text" class="register-back-btn" @click="backToLogin">马上登录</ElButton>
                        </p>
                    </ElFormItem>
                </ElForm>
            </div>
        </div>
        <div class="right-side fr"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ElForm } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { registerUser } from '@/api/api.query.util';
import { debounce } from '@/utils/utils';

type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
const visible = ref(false);
const numberValidateForm = reactive({
    name: '',
    phone: '',
    identityCard: '',
    password: '',
    passwordComfirm: '',
});
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== numberValidateForm.password) {
        callback(new Error('密码不一致'));
    } else {
        callback();
    }
};
const rules = reactive({
    name: [
        {
            required: true,
            message: '请输入真实姓名',
        },
        {
            min: 2,
            message: '长度不低于2个字符',
            trigger: 'blur',
        },
    ],
    phone: [
        {
            required: false,
        },
        {
            type: 'number',
            message: '电话号码必须是数字',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
        },
        {
            min: 6,
            max: 18,
            message: '密码长度范围6-18个字符',
            trigger: 'blur',
        },
    ],
    passwordComfirm: [
        {
            required: true,
            validator: validatePass2,
            trigger: 'blur',
        },
    ],
    identityCard: [
        {
            required: true,
            message: '请输入身份证号码',
        },
        {
            min: 15,
            message: '身份证号码长度不低于15位',
            trigger: 'blur',
        },
    ],
});
const router = useRouter();
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    debounce(() => {
        formEl.validate((valid) => {
            if (valid) {
                registerUser({
                    method: 'post',
                    data: {
                        idCard: numberValidateForm.identityCard,
                        password: numberValidateForm.password,
                        phoneNo: numberValidateForm.phone,
                        userName: numberValidateForm.name,
                        accountType: 2,
                    },
                }).then((res) => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '注册成功',
                            type: 'success',
                        });
                        router.push({ path: '/login' });
                    }
                });
            }
        });
    }, 500);
};
function backToLogin() {
    router.push({ path: '/login' });
}
</script>

<style lang="scss" scoped>
.register {
    display: flex;
    justify-content: row;
    align-items: center;
    font-size: 'PingFang-SC-Bold';
    .left-side {
        width: 66vw;
        display: flex;
        justify-content: center;
        align-item: center;
    }
    .right-side {
        width: 34vw;
        height: 100vh;
        background: url('../../assets/image/register_banner.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .register-content {
        width: 800px;
        height: 500px;
        .left-side-tittle {
            font-size: 26px;
            color: #333;
            font-weight: 600;
            margin-bottom: 35px;
        }
        .registerBtn {
            width: 592px;
            font-size: 14px;
            background-color: #3ab0a2;
            border-radius: 4px;
            color: #fff;
            font-weight: 600;
        }
        .register-back {
            text-align: center;
            font-family: AdobeHeitiStd-Regular;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #333333;
        }
        .register-back-btn {
            color: #3ab0a2;
        }
        .upload {
            font-size: 14px;
            color: #606266;
            margin-bottom: 30px;
            display: flex;
            align-item: center;
            span {
                line-height: 40px;
            }
        }
        .remind-icion {
            width: 17px;
            height: 17px;
            position: relative;
            top: 3px;
            display: inline-block;
            background: url('../../assets/image/remind-icion_default.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .uploadBtn {
            color: #606266;
        }
    }
    .register-input {
        width: 290px;
        height: 42px;
        border-radius: 4px;
    }
}
/deep/.el-form-item__label {
    line-height: 20px;
}
/deep/.el-form--label-top .el-form-item__label {
    padding: 0px;
}
</style>
